<template>
	<scroll-view class="formBox" :scroll-y="scrollY">
		<uni-forms :modelValue="formData" ref="form" :rules="rules">
			<uni-forms-item v-if="form" :label-position="labelPosition" v-for="(item, idx) in formJson" :label="item.label" :labelWidth="item.labelWidth" :name="item.name" :required="item.rules ? item.rules[0].required : false" :mark="item.mark" :class="labelPosition == 'left' ? 'borader-bottom' : 'no-border' " :type="item.type">
				<uni-easyinput class="_input" v-if="item.type == 'input'" type="text" v-model="formData[item.name]"
					:placeholder="item.placeholder"
					 :labelPosition="labelPosition" />
				<textarea  class="_textarea" v-if="item.type == 'textarea'" :labelPosition="labelPosition" v-model="formData[item.name]"
					:placeholder="item.placeholder" />
				<!-- 				<uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox> -->
				<Picker class="_picker" v-if="item.type == 'picker'" :name="item.name" :keyName="item.keyName" :idName="item.idName"
					:form="form" :listName="item.listName" :list="item.list" :uploadUrl="item.uploadUrl" :labelPosition="labelPosition"></Picker>

        <PickerDate  class="_pickerDate" v-if="item.type == 'pickerDate'" v-model="formData[item.name]" :name="item.name" :labelPosition="labelPosition"></PickerDate>


        <FilePicker class="_filePicker" v-if="item.type == 'filePicker'" :form="form"
		:labelPosition="labelPosition"
					:returnType="item.multiple ? 'array' : 'object'" fileMediatype="image" :mode="item.mode || 'grid'"
					:name="item.name"></FilePicker>
				<Radio  class="_radio" v-if="item.type == 'radio'" :form="form" :name="item.name" :listName="item.listName"
					:keyName="item.keyName" :idName="item.idName" :list="item.list" :labelPosition="labelPosition"></Radio>
				<iSwitch  class="_iSwitch" v-if="item.type == 'switch'" :form="form" :name="item.name" :keyName="item.keyName"
					:idName="item.idName" :list="item.list" :labelPosition="labelPosition"></iSwitch>
			</uni-forms-item>
		</uni-forms>
	</scroll-view>
</template>

<script>
	import FilePicker from './FormItem/FilePicker.vue'
	import Picker from './FormItem/Picker.vue'
  import PickerDate from './FormItem/PickerDate.vue'
	import Radio from './FormItem/Radio.vue'
	import iSwitch from './FormItem/Switch.vue'
	export default {
		components: {
			FilePicker,
			Picker,
      PickerDate,
			Radio,
			iSwitch
		},
		data() {
			return {
				form: null,
				rules: {},
				formData: {}
			};
		},
		props: {
			labelPosition: {
				type: String,
				default:'top'
			},
			formJson: {
				type: Array,
				default: () => []
			},
			scrollY: {
				type: Boolean,
				default: () => true
			}
		},
		mounted() {
			this.form = this.$refs.form;
			this.formData = this.filterData();
			this.rules = this.filterRulesData();
			this.$nextTick();
		},
		created() {
		},
		methods: {
			filterData() {
				let _ = {};
				this.formJson.map(function(t, idx) {
					_[t.name] = "";
				})
				return _;
			},
			filterRulesData() {
				let _ = {};
				this.formJson.map(function(t, idx) {
					if (t.rules) {
						_[t.name] = {
							rules: t.rules
						};
					} else {
						_[t.name] = {
							rules: [{
								required: false
							}]
						}
					}
				})
				return _;
			}
		}
	};
</script>

<style lang="scss">
	
	.borader-bottom{
		&:after{
			content:"";
			position: absolute;
			width:100%;
			height:1rpx;
			background-color: #e9e9e9;
			bottom:30rpx;
		}
		._input{
			 .is-input-border{
				border:none !important;
			}			
		}
		 .uni-forms-item__inner[type='textarea']{
			flex-direction: column;
			._textarea{
				border: none;
			}
		}
		 .uni-forms-item__inner[type='filePicker']{
			flex-direction: column;
		}

	}
	.mark{
		flex:1;
		max-width:30px;
		min-width:30px;
	}
	//  .uni-forms-item__label{
	// 	width: 100% !important;
	// }
	//  .uni-forms-item__inner{
	// 	padding-bottom:10rpx !important;
		
	// }
	
	
	 .uni-scroll-view-content {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.formBox {
		height: 80vh;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

</style>
